<template>
	<view class="m-infinite-levels">
		<view class="test-box"></view>
		<view class="cover-box">
			<view class="top-box"></view>
			<view class="content-box">

				<scroll-view ref="scrollView" scroll-y class="scroll-content" :show-scrollbar="false"
					:scroll-with-animation="true">
					<view class="level-item" v-for="(item,index) in useLevelList" :key="index"
						@click="handleLevelItemClick(index,item)">
						<image class="item-image" :src="item.bgImage" mode="aspectFill"></image>
						<view class="left-label">
							<view class="label-content">
								第{{item.level}}关
							</view>
						</view>
						<view class="heart-box">
							<view class="top-tip">
								<view class="icon-box"></view>

								<text>推荐舞力：</text>
							</view>
							<view class="bottom-heart">
								<text>{{item.heart}}</text>
							</view>
						</view>
						<view class="reward-box">
							<view class="top-tip">
								<view class="icon-box"></view>
								<text>通关奖励：</text>
							</view>
							<view class="reward-list">
								<view class="reward-item" v-for="(rItem,rIndex) in item.rewardList" :key="index">
									<image class="reward-icon" :src="rItem.image" mode="aspectFill"></image>
									<view class="bottom-num">{{rItem.num}}</view>
								</view>
								<!-- <view class="reward-item"></view>
								<view class="reward-item"></view> -->
							</view>
						</view>

						<view class="btn-box" @click="handleLevelItemClick(index,item)">
							<image class="icon-image"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c9864f9a483748a78c3aad0a7fd21f15.png"
								mode="aspectFill"></image>
							<text class="num">{{item.consume}}</text>
							<text>挑 战</text>
						</view>

						<view class="info-box">
							<image class="info-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0c84f70042744ae2b2d6df3ae7d8ae59.png"
								mode="aspectFill"></image>
						</view>

					</view>

				</scroll-view>
			</view>
		</view>

		<battleSetting ref="battleSetting" @result="handleStartGame"></battleSetting>




	</view>
</template>

<script>
	import battleSetting from "@/components/battle-setting/index.vue"
	export default {
		components: {
			battleSetting
		},
		data() {
			return {
				actJumpStory: "",
				levelList: [{
						level: 1,
						bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fcc1d13a3f1743d89ce08715600305c6.png",
						heart: 22684,
						rewardList: [{
								name: "金币",
								num: 1000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
							},
							{
								name: "以太币",
								num: 2000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
							},
							{
								name: "回忆碎片",
								num: 1,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
							},
						],
						consume: 8

					},
					{
						level: 2,
						bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/825ab8a31d0a418ebe6f62f4a3eeb146.png",
						heart: 22684,
						rewardList: [{
								name: "金币",
								num: 1000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
							},
							{
								name: "以太币",
								num: 2000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
							},
							{
								name: "回忆碎片",
								num: 1,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
							},
						],
						consume: 8
					},
					{
						level: 3,
						bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae4e82a0374b408ab0e52aa80e983ed1.png",
						heart: 22684,
						rewardList: [{
								name: "金币",
								num: 1000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
							},
							{
								name: "以太币",
								num: 2000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
							},
							{
								name: "回忆碎片",
								num: 1,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
							},
						],
						consume: 8
					},
					{
						level: 4,
						bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/074ecb095bdf4a0291ed2c421b16b488.png",
						heart: 22684,
						rewardList: [{
								name: "金币",
								num: 1000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
							},
							{
								name: "以太币",
								num: 2000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
							},
							{
								name: "回忆碎片",
								num: 1,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
							},
						],
						consume: 8
					},
					{
						level: 5,
						bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a0dd4cb871d4dc28e6f6d3fa341ed50.png",
						heart: 22684,
						rewardList: [{
								name: "金币",
								num: 1000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
							},
							{
								name: "以太币",
								num: 2000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
							},
							{
								name: "回忆碎片",
								num: 1,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
							},
						],
						consume: 8
					},
					{
						level: 6,
						bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/681d65a8e0574e6eae2c43d989b1b623.png",
						heart: 22684,
						rewardList: [{
								name: "金币",
								num: 1000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
							},
							{
								name: "以太币",
								num: 2000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
							},
							{
								name: "回忆碎片",
								num: 1,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
							},
						],
						consume: 8
					},
					{
						level: 7,
						bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/79bd3a853e254ff28631331bc21a648b.png",
						heart: 22684,
						rewardList: [{
								name: "金币",
								num: 1000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
							},
							{
								name: "以太币",
								num: 2000,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
							},
							{
								name: "回忆碎片",
								num: 1,
								image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
							},
						],
						consume: 8
					},
					// {
					// 	level: 8,
					// 	bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/79bd3a853e254ff28631331bc21a648b.png",
					// 	heart: 22684,
					// 	rewardList: [{
					// 			name: "金币",
					// 			num: 1000,
					// 			image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
					// 		},
					// 		{
					// 			name: "以太币",
					// 			num: 2000,
					// 			image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
					// 		},
					// 		{
					// 			name: "回忆碎片",
					// 			num: 1,
					// 			image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
					// 		}
					// 	],
					// 	consume: 8
					// },
					// {
					// 	level: 9,
					// 	bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/825ab8a31d0a418ebe6f62f4a3eeb146.png",
					// 	heart: 22684,
					// 	rewardList: [{
					// 			name: "金币",
					// 			num: 1000,
					// 			image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
					// 		},
					// 		{
					// 			name: "以太币",
					// 			num: 2000,
					// 			image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
					// 		},
					// 		{
					// 			name: "回忆碎片",
					// 			num: 1,
					// 			image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
					// 		}
					// 	],
					// 	consume: 8
					// },
					// {
					// 	level: 10,
					// 	bgImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31024fcee62e4fab9299b4d9459eda63.png",
					// 	heart: 22684,
					// 	rewardList: [{
					// 			name: "金币",
					// 			num: 1000,
					// 			image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
					// 		},
					// 		{
					// 			name: "以太币",
					// 			num: 2000,
					// 			image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
					// 		},
					// 		{
					// 			name: "回忆碎片",
					// 			num: 1,
					// 			image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
					// 		}
					// 	],
					// 	consume: 8
					// },

				]
			}
		},
		computed: {
			useLevelList() {
				let arr = [...this.levelList]
				return arr.reverse()
			}
		},
		methods: {
			handleLevelItemClick(index, item) {
				this.$refs.battleSetting.open()
				// 之后会是关卡storyId,或者指定storyId
				this.actJumpStory = "S013LUL"
			},
			handleStartGame() {
				if (this.actJumpStory) {
					this.$emit("getGameResult", this.actJumpStory)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-infinite-levels {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		z-index: 9999999999999999999999;
		pointer-events: none;


		.test-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			background-color: rgba(255, 255, 255, 0);
			backdrop-filter: blur(15rpx);
			z-index: 2;
		}

		.cover-box {
			width: 100vw;
			height: 100vh;
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			z-index: 3;
		}

		.top-box {
			width: 100%;
			height: 170rpx;
		}

		.content-box {
			width: 100%;
			flex: 1;
			overflow: hidden;
			pointer-events: fill;

			.scroll-content {
				width: 100%;
				height: 100%;
				overflow: hidden;
				box-sizing: border-box;
				// padding-bottom: 20rpx;

				.level-item {
					position: relative;
					width: 100%;
					height: 350rpx;
					// margin-bottom: 5rpx;

					&:first-child {
						margin-top: 20rpx;
					}


					.item-image {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 100%;
						z-index: 1;
						box-shadow: 0rpx 0rpx 12rpx #fff;
					}

					.left-label {
						position: absolute;
						left: 0rpx;
						top: 10rpx;
						z-index: 2;
						height: 50rpx;
						width: 100%;

						.label-content {
							display: inline-block;
							height: 100%;
							padding: 0 50rpx;
							// border-radius: 0rpx 25rpx 25rpx 0rpx;
							font-size: 24rpx;
							text-align: center;
							line-height: 50rpx;
							letter-spacing: 5rpx;
							color: #fff;
							// background-image: linear-gradient(to top right, #000000, #290f30);
							background-image: linear-gradient(to right, rgba(0, 0, 0, .6)60%, rgba(0, 0, 0, 0)100%);
							// background-color: rgba(0, 0, 0, .5);
							// box-shadow: 0rpx 1rpx 2rpx #b2f2f7;
							font-weight: 700;
							text-align: left;
							box-sizing: border-box;
							padding-left: 20rpx;


						}
					}

					.heart-box {
						position: absolute;
						left: 0rpx;
						top: 100rpx;
						// width: 200rpx;
						height: 100rpx;
						z-index: 2;


						.top-tip {
							width: 100%;
							height: 30rpx;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							color: #effbff;
							font-size: 20rpx;
							line-height: 30rpx;

							.icon-box {
								width: 2rpx;
								height: 20rpx;
								background-color: #fff;
								margin-right: 10rpx;
								background-color: #effbff;
								box-shadow: 0rpx 0rpx 2rpx #effbff;
								margin-left: 10rpx;
							}


						}

						.bottom-heart {
							height: 30rpx;
							width: 100%;
							text-align: center;
							color: #f7c78f;
							font-size: 24rpx;
							line-height: 30rpx;
							font-weight: 700;
							// text-shadow: 1rpx 1rpx 1rpx #fee090;
							display: flex;
							justify-content: center;
							align-items: center;

						}


					}

					.reward-box {
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 100%;
						height: 130rpx;
						background-color: rgba(0, 0, 0, .5);
						z-index: 2;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.top-tip {
							width: 100%;
							height: 30rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							color: #effbff;
							font-size: 20rpx;
							line-height: 30rpx;

							.icon-box {
								width: 2rpx;
								height: 20rpx;
								background-color: #fff;
								margin-right: 10rpx;
								background-color: #effbff;
								box-shadow: 0rpx 0rpx 2rpx #effbff;
								margin-left: 10rpx;
							}


						}
					}



					.reward-list {
						width: 100%;
						height: 60rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						box-sizing: border-box;
						padding: 0 20rpx;
						margin-top: 10rpx;

						.reward-item {
							position: relative;
							width: 60rpx;
							height: 60rpx;
							background-color: #fff;
							margin-right: 10rpx;
							border-radius: 10rpx 0rpx 10rpx 0rpx;
							overflow: hidden;

							.bottom-num {
								position: absolute;
								right: 2rpx;
								bottom: 2rpx;
								display: inline-block;
								padding: 0rpx 5rpx;
								background-color: rgba(0, 0, 0, .1);
								text-align: center;
								font-size: 18rpx;
								line-height: 18rpx;
								color: #fff;
								border-radius: 5rpx;
								z-index: 2;
							}

							.reward-icon {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
								border: 2rpx solid #acc1dd;

							}
						}

					}

					.btn-box {
						position: absolute;
						right: 50rpx;
						bottom: 20rpx;
						z-index: 3;
						width: 170rpx;
						height: 50rpx;
						border-radius: 10rpx;
						background-color: #f8efe0;
						color: #715a52;
						font-size: 24rpx;
						line-height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 700;
						box-shadow: 0rpx 0rpx 6rpx #fff;

						.icon-image {
							width: 25rpx;
							height: 25rpx;
							vertical-align: middle;
						}

						.num {
							font-size: 20rpx;
							margin-right: 20rpx;
							font-weight: 400;
							line-height: 50rpx;
						}
					}

					.info-box {
						position: absolute;
						right: 50rpx;
						top: 15rpx;
						width: 30rpx;
						height: 30rpx;
						z-index: 2;

						.info-img {
							width: 100%;
							height: 100%;
						}
					}
				}

			}

		}


	}
</style>